<template>
	<!-- 订单详情 -->
	<view class="orderInfo-main" v-if="orderInfoObj">
		<!-- 状态 -->
		<view class="orderType">
			<view class="">
				<!-- 已取消 -->
				<view class="type" v-if="orderInfoObj.status == '3'">订单已取消</view>
				<!-- 已失效 -->
				<view class="type" v-else-if="orderInfoObj.status == '2'">订单已失效</view>
				<!-- 待支付 -->
				<view class="type" v-else-if="orderInfoObj.status == '0'">待支付</view>
				<!-- 已支付/待发货 -->
				<view class="type" v-else>
					{{ orderTypeFilter(orderInfoObj.distribution, orderInfoObj.distribution_type, orderInfoObj.distribution_state) }}
				</view>
			</view>

			<!-- 待支付，倒计时不为空 -->
			<view class="time" v-if="orderInfoObj.status == '0' && remainingTime">
				<u-icon name="bell" size="20"></u-icon>
				<text style="padding: 0px 10rpx">剩余时间</text>
				<u-count-down :time="remainingTime" format="HH:mm:ss" style="color: #fff" @finish="getfinish"></u-count-down>
			</view>

			<view class="">
				<!-- 已失效 -->
				<view v-if="orderInfoObj.status == '2'">
					<view class="orderExpired" v-if="!remainingTime">当前订单已失效，请重新下单！！</view>
				</view>

				<!-- 已取消 -->
				<view class="orderExpired" v-if="orderInfoObj.status == '3'">当前订单已取消，请重新下单！！</view>

				<!-- 已支付/待发货 -->
				<view class="orderExpired" v-if="orderInfoObj.status == '1'">
					{{ orderTypeNameFilter(orderInfoObj.distribution, orderInfoObj.distribution_type, orderInfoObj.distribution_state) }}
				</view>
			</view>
		</view>

		<view style="margin-bottom: 30rpx; border-radius: 20rpx; overflow: hidden" v-if="orderInfoObj.status == '1' && orderInfoObj.distribution">
			<map id="maps" :longitude="storeInfo.lng" :latitude="storeInfo.lat" scale="14" :markers="markers" show-location style="width: 100%; height: 300px"></map>
		</view>

		<!-- 联系地址 -->
		<view class="order-address">
			<view class="order-address-header">收货地址</view>
			<view class="info">
				<text style="padding-right: 8rpx">{{ orderInfoObj.address_info.name }}</text>
				<text>{{ orderInfoObj.address_info.phone }}</text>
			</view>
			<view class="address">
				{{ orderInfoObj.address_info.address }}
			</view>
		</view>

		<view class="codeBox" v-if="orderInfoObj.distribution_type == 1 && orderInfoObj.status == 1 && orderInfoObj.distribution_state != 5">
			<view class="codeBox-header">取货码</view>
			<view style="color: #999; font-size: 24rpx; margin-bottom: 20rpx; text-align: center">进店扫描二维码，进行销核</view>
			<ayQrcode ref="qrcode" :modal="modal_qr" :url="orderInfoObj.id" @hideQrcode="hideQrcode" :height="260" :width="260" />
		</view>

		<!-- 订单详情 -->
		<view class="orderInfos">
			<view class="orderInfo-shop">
				<text>{{ orderInfoObj.store_id == 0 ? '官方自营' : orderInfoObj.store.name }}</text>
				<uni-icons type="forward" size="18"></uni-icons>
			</view>
			<view class="orderInfo-shopData" v-for="(item, index) in orderInfoObj.goods_info" :key="item.info.id">
				<view class="shopimage">
					<image :src="imageUrls(item.fileUrl)" class="images"></image>
				</view>
				<view class="shopinfo">
					<view class="shopinfo-title">
						<text class="title">{{ item.name }}</text>
						<text class="pir">
							¥
							<text style="font-size: 16px">{{ item.price != '0.00' ? item.price : item.saleprice.toFixed(2) }}</text>
						</text>
					</view>
					<view class="shopinfo-gg">
						<text>规格:{{ item.spec }}</text>
						<text>x{{ item.buy_num }}</text>
					</view>
					<view class="shopinfo-tags">
						<uni-tag :text="item.mediaName" size="mini" style="margin-right: 8rpx" type="error"></uni-tag>
					</view>
				</view>
			</view>
			<view class="shop-ps">
				<view class="">商品金额</view>
				<view class="ps">￥{{ orderInfoObj.price }}</view>
			</view>
			<view class="shop-ps">
				<view class="">配送费</view>
				<view class="ps">
					{{ orderInfoObj.freight == '0.00' ? '免运费' : '￥' + orderInfoObj.freight }}
				</view>
			</view>
			<view class="shop-xj">
				<view class="pir">
					<text style="margin-right: 4rpx">合计</text>
					￥
					<text style="font-size: 36rpx">{{ orderInfoObj.pay_money || '0.00' }}</text>
				</view>
			</view>
		</view>

		<!-- 订单创建信息 -->
		<view class="order_create">
			<view class="orderItem">
				<view class="orderName">订单编号</view>
				<view class="orderValue">
					{{ orderInfoObj.order_no }}
					<text class="copy" @click="copyText(orderInfoObj.order_no)">复制</text>
				</view>
			</view>
			<view class="orderItem">
				<view class="orderName">下单时间</view>
				<view class="orderValue">
					{{ formatTimestamps(orderInfoObj.createtime) }}
				</view>
			</view>
		</view>

		<!-- 骑手信息 -->
		<view class="order-address" v-if="orderInfoObj.status == '1' && orderInfoObj.distribution">
			<view class="order-address-header">骑手信息</view>
			<view class="info">
				<text style="padding-right: 8rpx; font-weight: bold">{{ orderInfoObj.distribution.transporterName }}</text>
				<text>{{ orderInfoObj.distribution.transporterPhone }}</text>
			</view>
			<view class="qs-info">
				<view class="qs-item">
					<view class="riderItem-label">发单时间：</view>
					{{ orderInfoObj.distribution.createTime || '暂无' }}
				</view>
				<view class="qs-item">
					<view class="riderItem-label">接单时间：</view>
					{{ orderInfoObj.distribution.acceptTime || '暂无' }}
				</view>

				<view class="qs-item">
					<view class="riderItem-label">取货时间：</view>
					{{ orderInfoObj.distribution.fetchTime || '暂无' }}
				</view>

				<view class="qs-item">
					<view class="riderItem-label">送达时间：</view>
					{{ orderInfoObj.distribution.finishTime || '暂无' }}
				</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="order-btn" :style="bottomStyle">
			<!-- 已取消或者已失效 -->
			<view v-if="orderInfoObj.status == '3' || orderInfoObj.status == '2'">
				<button class="mini-btn" type="default" size="mini" style="margin-right: 20rpx" @click="getuserDelOrder(orderInfoObj.id)">删除订单</button>
				<button class="mini-btn" type="warn" size="mini" @click="getRepurchase(orderInfoObj)">重新下单</button>
			</view>
			<view v-else>
				<button class="mini-btn" type="default" size="mini" style="margin-right: 20rpx" @click="getContactBusiness">联系商家</button>
				<button class="mini-btn" type="default" size="mini" style="margin-right: 20rpx" @click="getCancelOrder" v-if="orderInfoObj.status == 0">取消订单</button>
				<button class="mini-btn" type="warn" size="mini" v-if="orderInfoObj.status == 0">去支付</button>
			</view>
		</view>
	</view>
</template>

<script>
import { userOrderDetail, userCancelOrder, userDelOrder } from '../../api/order/index.js';
import ayQrcode from '../../components/ay-qrcode/ay-qrcode.vue';
import { formatTimestamp, imageUrl } from '../../utils/tools.js';
export default {
	data() {
		return {
			orderInfoObj: {},
			orderId: '',
			// 剩余时间 30 * 60 * 1000
			remainingTime: 0,
			markers: [],
			storeInfo: {
				lng: 0,
				lat: 0
			},
			modal_qr: false
		};
	},
	components: {
		ayQrcode
	},
	computed: {
		bottomStyle() {
			const systemInfo = uni.getSystemInfoSync();
			const { safeAreaInsets } = systemInfo;
			const bottomSafeAreaHeight = safeAreaInsets.bottom || 0;
			return `padding-bottom: ${bottomSafeAreaHeight ? bottomSafeAreaHeight + 'px' : '20rpx'}`;
		}
	},
	async onLoad(option) {
		const { id } = option;
		this.orderId = id;
		await this.getuserOrderDetail();

		// 到店自提才有二维码
		if (this.orderInfoObj.distribution_type == 1 && this.orderInfoObj.status == 1) {
			this.showQrcode();
		}
	},
	methods: {
		// 展示二维码
		showQrcode() {
			this.modal_qr = true;
			setTimeout(() => {
				this.$refs.qrcode.crtQrCode();
			}, 50);
		},

		//传入组件的方法
		hideQrcode() {
			this.modal_qr = false;
		},

		// 订单详情
		async getuserOrderDetail() {
			try {
				const resData = await userOrderDetail({
					id: this.orderId
				});
				this.orderInfoObj = resData.data;

				// 倒计时时间
				const createtime = this.orderInfoObj.createtime;
				const timestamp = Math.floor(Date.now() / 1000);

				// 获取30分钟后的时间戳
				const timestampInThirtyMinutes = createtime + 30 * 60;
				if (timestampInThirtyMinutes >= timestamp) {
					console.log('未失效');
					this.remainingTime = (timestampInThirtyMinutes - timestamp) * 1000;
				} else {
					if (this.orderInfoObj.status == 0) {
						this.orderInfoObj.status = 2;
					}
				}
			} catch (e) {
				throw Error(e);
			}
		},

		orderInfoStatus(val) {
			const statusMap = {
				0: '待付款',
				1: '待发货',
				2: '已失效',
				3: '已取消'
			};
			return statusMap[val];
		},

		// 取消订单
		async getCancelOrder() {
			try {
				const resData = await userCancelOrder({
					id: this.orderInfoObj.id
				});
				uni.showToast({
					title: '取消成功'
				});
				await this.getuserOrderDetail();
			} catch (e) {
				throw Error(e);
			}
		},

		// 时间格式化
		formatTimestamps(timestamp) {
			return formatTimestamp(timestamp);
		},

		// 复制
		async copyText(text) {
			try {
				await uni.setClipboardData({
					data: text
				});
				uni.showToast({
					title: '复制成功',
					icon: 'none',
					duration: 1500
				});
			} catch (e) {
				uni.showToast({
					title: '复制失败',
					icon: 'none',
					duration: 1500
				});
			}
		},

		// 删除订单
		async getuserDelOrder(id) {
			try {
				const resData = await userDelOrder({
					id
				});
				if (resData.code == 1) {
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack(-1);
					}, 500);
				} else {
					uni.showToast({
						title: resData.msg,
						icon: 'none'
					});
				}
			} catch (e) {
				throw Error(e);
			}
		},

		orderTypeFilter(val, type, status) {
			if (type != 1) {
				if (typeof val == 'object') {
					let typeList = {
						1: '待骑手接单',
						2: '待骑手取货',
						3: '骑手配送中',
						4: '待确认收货',
						5: '已取消',
						8: '指派单',
						9: '妥投异常之物品返回中',
						10: '妥投异常之物品返回完成',
						100: '骑士到店'
					};
					return typeList[val.statusCode];
				} else {
					return '等待派单';
				}
			} else {
				return status == 5 ? '已完成' : '待销核';
			}
		},

		orderTypeNameFilter(val, type, status) {
			if (type != 1) {
				if (typeof val == 'object') {
					let typeList = {
						1: '配送已发起，等待骑手接单中',
						2: '骑手已接单，等待骑手上门取货',
						3: '骑手已取货，正在配送中',
						4: '骑手已送达，等待客户确认收货',
						5: '配送订单已取消',
						8: '订单指派中',
						9: '异常订单：妥投异常之物品返回中',
						10: '异常订单：妥投异常之物品返回完成',
						100: '骑手已到店，待取货'
					};
					return typeList[val.statusCode];
				} else {
					return '等待派单中，请稍后...';
				}
			} else {
				return status == 5 ? '订单已销核' : '等待订单销核';
			}
		},

		// 联系商家
		getContactBusiness() {
			if (!this.orderInfoObj.store.contact_phone) {
				return uni.showToast({
					title: '无商家信息',
					icon: 'none'
				});
			}
			uni.makePhoneCall({
				phoneNumber: this.orderInfoObj.store.contact_phone
			});
		},

		// 倒计时结束
		getfinish() {
			this.orderInfoObj.status = 2;
		},

		// 重新下单
		async getRepurchase(info) {
			// 删除订单
			await userDelOrder({
				id: info.id
			});
			let orderListArr = [];
			info.goods_info.forEach((item) => {
				orderListArr.push({
					id: item.info.id,
					num: item.num
				});
			});

			// 清空购物车缓存
			this.$store.commit('clearCartShopList');

			// 勾选的商品
			this.$store.dispatch('getCartShopListAsync', orderListArr);

			// 云店或者闪电送
			uni.navigateTo({
				url: `/pages/submitOrder/submitOrder?type=${info.type}`
			});
		},

		imageUrls(url) {
			return imageUrl(url);
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
</style>

<style scoped lang="scss">
.orderInfo-main {
	box-sizing: border-box;
	padding: 20rpx;
	background: linear-gradient(to bottom, #ffb3b3, #ffe0e0, #fff);
	padding-bottom: 150rpx;
	.orderType {
		height: 180rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.type {
			margin-bottom: 20rpx;
			margin-top: 40rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #000;
		}
		.time {
			display: flex;
			align-items: center;
			font-size: 24rpx;
		}
		.orderExpired {
			color: #444;
			font-size: 24rpx;
		}
	}
	.order-address {
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 24rpx;
		font-size: 26rpx;
		.order-address-header {
			padding-bottom: 20rpx;
			border-bottom: 1px #f3f3f3 solid;
			margin-bottom: 20rpx;
			font-size: 27rpx;
			font-weight: bold;
		}
		.info {
			margin-bottom: 20rpx;
		}
		.address {
			color: #999;
			font-size: 24rpx;
		}
	}
	.orderInfos {
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 24rpx;
		margin: 20rpx 0px;

		.orderInfo-shop {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			height: 60rpx;
			padding-bottom: 10rpx;
			border-bottom: 1px #f3f3f3 solid;
		}

		.orderInfo-shopData {
			display: flex;
			box-sizing: border-box;
			padding: 20rpx 0px;
			padding-bottom: 10rpx;
			border-bottom: 1px #f3f3f3 solid;
			.shopimage {
				width: 180rpx;
				height: 180rpx;
				.images {
					width: 160rpx;
					height: 160rpx;
				}
			}
			.shopinfo {
				flex: 1;
				.shopinfo-title {
					display: flex;
					font-size: 30rpx;
					justify-content: space-between;
					.title {
						flex: 1;
						font-size: 26rpx;
						font-weight: bold;
						color: #444;
					}
					.pir {
						font-size: 12px;
						color: #444;
						margin-left: 10rpx;
					}
				}

				.shopinfo-gg {
					display: flex;
					justify-content: space-between;
					margin: 15rpx 0px;
					font-size: 24rpx;
					color: #999;
				}
			}
		}

		.shop-ps {
			display: flex;
			justify-content: space-between;
			height: 50rpx;
			line-height: 50rpx;
			padding: 20rpx 0;
			border-bottom: 1px #f3f3f3 solid;
			font-size: 28rpx;
			.ps {
				color: #e43927;
			}
		}

		.shop-xj {
			display: flex;
			justify-content: flex-end;
			height: 70rpx;
			line-height: 70rpx;
			padding: 20rpx 0;
			padding-bottom: 0px;
			.pir {
				font-size: 24rpx;
			}
		}
	}

	.order_create {
		box-sizing: border-box;
		padding: 10rpx 30rpx;
		background-color: #fff;
		border-radius: 24rpx;
		margin-bottom: 20rpx;
		.orderItem {
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			.orderName {
				color: #999;
			}
			.orderValue {
				.copy {
					display: inline-block;
					padding: 8rpx 18rpx;
					border-radius: 24rpx;
					background-color: #f3f3f3;
					margin-left: 12rpx;
					font-size: 24rpx;
				}
			}
		}
	}

	.order-btn {
		text-align: right;
		background-color: #fff;
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-top-right-radius: 10rpx;
		border-top-left-radius: 10rpx;
	}
}

.qs-info {
	.qs-item {
		display: flex;
		align-items: center;
		height: 60rpx;
		.riderItem-label {
			width: 160rpx;
			color: #999;
		}
	}
}

.codeBox {
	background-color: #fff;
	padding: 40px 0px;
	padding-top: 20px;
	border-radius: 20rpx;
	margin-top: 20rpx;
	.codeBox-header {
		margin-bottom: 10rpx;
		text-align: center;
		font-size: 28rpx;
		color: #555;
	}
}
</style>
